<template>
	<view id="searchBox"  :style="{padding:padding}">
		<!-- 搜索输入框 -->
		<view class="es-filter-search" @tap="onClick" :style="{width:width,height:height,borderRadius:radius,background:background}">
			<!-- 条件过滤组件 -->
			<block  v-if="filterType === 'area' || filterType === 'select'">
				<view class="es-filter-search__filter" @tap.stop="onTapFilter">
					<view class="es-filter-filter__text" :style="{color:filterData.label?'#1e1e1e':'#999'}">{{filterData.label||filterData.name||'请选择'}}</view>
					<view class="esfont es-filter__icon--arrow" 	
					:style="{'transform': showPopup?'rotate(-180deg)':'rotate(0)'}">&#xe708;</view>
				</view>
				<view class="es-filter__divide"></view>
			</block>
			<text class="esfont es-filter__icon--search">&#xe6cc;</text>
			<input class="es-filter__search-input" :placeholder="placeholder" :placeholder-style="placeholderS" :disabled="disabled"
			:focus="focus"
			@focus="onFocus" @blur="onBlur"	v-model="searchValue" @input="onInput" confirm-type="search" @confirm="onSearch" />
			<view v-if="showClear && searchValue" class="esfont es-filter__icon--clear" @tap.stop="onClear">&#xe6f8;</view>
		</view>
		
		<!-- 地区选择 -->
		<es-filter-area  v-if="filterType==='area'" 
		 :show="showPopup" :value="filterData.value" :top="maskHeight+'px'" :height="filterData.height" :background="filterData.background"
		 :enable-location="filterData.enableLocation" :activeBg="filterData.activeBg" :activeColor="filterData.activeColor"  :zIndex="filterData.zIndex"
		 @confirm="onAreaChange"  @close="onClose(index)"></es-filter-area>
		 
		 <!-- 下拉选择 -->
		<es-filter-select v-else-if="filterType==='select'"  :background="filterData.background"
		  :show="showPopup" :value="filterData.value"  :top="maskHeight+'px'" :height="filterData.height"
		  :activeBg="filterData.activeBg" :activeColor="filterData.activeColor" :zIndex="filterData.zIndex"
		  :options="filterData.options" :column="filterData.column"  :multiple="filterData.multiple"
		   @confirm="onSelectChange"  @close="onClose(index)"></es-filter-select>
		   
		<!-- 遮罩层，用于弹窗时防止用户点击空白区域 -->
		<view v-if="showPopup" @tap="showPopup = false" @touchmove.stop.prevent
			class="es-filter__mask" :style="{height:maskHeight+'px'}"></view>
	</view>

</template>

<script>
	import esFilterArea from '../es-filter-area/es-filter-area';
	import esFilterSelect from '../es-filter-select/es-filter-select';
	
	export default {
		components:{
			esFilterArea,
			esFilterSelect
		},
		props:{
			//输入框值
			value:String,
			filterParam:{
				type: Object,
				default: function() {
					return {}
				}
			},
			//area-支持地区选择  select-支持下拉选择
			filterType:{
				type:String,
				default:""
			},
			// 下拉选项列表
			options: {
				type: Array,
				default: function() {
					return []
				}
			},
			width:{
				type:String,
				default:"465rpx"
			},
			height:{
				type:String,
				default:"66rpx"
			},
			radius:{
				type:String,
				default:"66rpx"
			},
			padding:{
				type:String,
				default:"10rpx 20rpx"
			},
			background:{
				type:String,
				default:"#f6f8fb"
			},
			placeholder:{
				type:String,
				default:"请输入关键字搜索..."
			},
			placeholderClass:String,
			showClear:{
				type:Boolean,
				default:true
			},
			disabled:{
				type:Boolean,
				default:false
			},
			focus:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			filterParam:{
				immediate:true,
				handler(){
					this.filterData = Object.assign({},this.filterParam||{});
				}
			},
			value:{
				immediate:true,
				handler(){
					this.searchValue = this.value;
				}
			}
		},
		data(){
			return {
				filterData:{},
				searchValue:"",
				showPopup:false,
				maskHeight:0
			}
		},
		methods:{
			onAreaChange(e,index){
				this.filterData.label = e.name;
				this.onClose();
				this.$emit("filterChange",{
					distance:e.distance,
					province:e.province,
					city:e.city
				});
			},
			onSelectChange(e,index){
				this.filterData.label = e.label||'';
				this.onClose();
				this.$emit("filterChange",e.value||null);
			},
			getMaskHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select("#searchBox")
				  .boundingClientRect((data) => {
					  this.maskHeight =  data.top + data.height;
					  // #ifdef H5
					  this.maskHeight += uni.getSystemInfoSync().windowTop;
					  // #endif
				  })
				  .exec();
			},
			onClose(index){
				this.showPopup = false;
			},
			onTapFilter(){
				//获取遮罩距离顶部高度
				this.getMaskHeight();
				this.showPopup = true;
			},
			onClear(){
				this.$emit("clear");
			},
			onSearch(){
				this.$emit("search",this.searchValue);
			},
			onInput(e) {
				this.$emit("input", e);
			},
			onClick(){
				this.$emit("click");
			},
			onFocus(){
				this.$emit("focus");
			},
			onBlur(){
				this.$emit("blur");
			}
		}
	}
</script>

<style scoped>
	.es-filter-search {
		padding: 0 25rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.es-filter-search__filter{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 5rpx;
	}

	.es-filter-filter__text{
		max-width: 120rpx;
		font-size: 26rpx;
		color: #1E1E1E;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.es-filter__icon--arrow{
		font-size: 15rpx;
		color: #B6B6B6;
		margin-left: 5rpx;
		transition: all 0.3s;
	}

	.es-filter__divide{
		width: 1rpx;
		height: 20rpx;
		background-color: #B6B6B6;
		margin:0 20rpx;
	}
	
	.es-filter__icon--search {
		color: #B6B6B6;
		font-size: 24rpx;
		line-height: 24rpx;
	}
	
	.es-filter__search-input {
		flex: 1;
		height: 30rpx;
		font-size: 26rpx;
		font-family: PuHui;
		color: #1E1E1E;
		margin:0 10rpx;
	}
	
	.es-filter__icon--clear{
		font-size: 26rpx;
		color: #B6B6B6;
		padding: 10rpx 0;
	}
	
	.es-filter__mask{
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>